<template>
  <div 
    class="editor-divider" 
    :class="[
      `divider-${props.type}`,
      `divider-${props.orientation}`
    ]"
    :style="dividerStyle"
  >
    <span v-if="props.showText" class="divider-text" :style="{ color: props.textColor }">
      {{ props.text }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  showText: {
    type: Boolean,
    default: false
  },
  orientation: {
    type: String,
    default: 'center'
  },
  type: {
    type: String,
    default: 'solid'
  },
  color: {
    type: String,
    default: '#e0e0e0'
  },
  textColor: {
    type: String,
    default: '#999999'
  },
  margin: {
    type: Number,
    default: 15
  }
});

const dividerStyle = computed(() => {
  return {
    color: props.color,
    margin: `${props.margin}px 0`
  };
});

defineOptions({
  name: 'editor-divider'
});
</script>

<style lang="scss" scoped>
.editor-divider {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  
  &::before, &::after {
    content: '';
    flex: 1;
    height: 1px;
  }
  
  &.divider-solid {
    &::before, &::after {
      border-top: 1px solid currentColor;
    }
  }
  
  &.divider-dashed {
    &::before, &::after {
      border-top: 1px dashed currentColor;
    }
  }
  
  &.divider-dotted {
    &::before, &::after {
      border-top: 1px dotted currentColor;
    }
  }
  
  .divider-text {
    padding: 0 15px;
    font-size: 14px;
    white-space: nowrap;
  }
  
  &.divider-left {
    .divider-text {
      padding-left: 0;
    }
    
    &::before {
      flex: 0 0 5%;
    }
  }
  
  &.divider-right {
    .divider-text {
      padding-right: 0;
    }
    
    &::after {
      flex: 0 0 5%;
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 